import { onMounted, ref } from "vue";

export default {
    setup() {

        // let $player = document.getElementById('play');
        // let $pause = document.getElementById('pause');
        // let $playHref = document.getElementById('playUrl');
        let $container = document.getElementById('container');
        // let $destroy = document.getElementById('destroy');
        console.log($container)

        let showOperateBtns = true; // 是否显示按钮
        let forceNoOffscreen = true; //
        let jessibuca = null;

        function create() {
            jessibuca = new Jessibuca({
                container: $container,
                videoBuffer: 0.2, // 缓存时长
                isResize: true,
                text: "",
                loadingText: "加载中",
                debug: true,
                showBandwidth: showOperateBtns, // 显示网速
                operateBtns: {
                    fullscreen: showOperateBtns,
                    screenshot: showOperateBtns,
                    play: showOperateBtns,
                    audio: showOperateBtns,
                    record: showOperateBtns
                },
                useWCS: true, // webcodecs 解码
                wcsUseVideoRender: true,
                forceNoOffscreen: forceNoOffscreen,
                isNotMute: false,
            });

            jessibuca.onLog = msg => console.error(msg);
            jessibuca.onRecord = (status) => console.log('onRecord', status);
            jessibuca.onPause = () => console.log('onPause');
            jessibuca.onPlay = () => console.log('onPlay');
            jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
            jessibuca.onMute = msg => console.log('onMute', msg);
            // $player.style.display = 'inline-block';
            // $pause.style.display = 'none';
            // $destroy.style.display = 'none';
        }


        function play(url) {
            jessibuca.play(url);
        }

        function pause() {
            jessibuca.pause();
        }

        function destroy() {
            if(jessibuca) {
                jessibuca.destroy();
            }
        }
        

        return {
            create,
            play,
            pause,
            destroy,
        }

        // $player.addEventListener('click', function () {
        //     var href = $playHref.value;
        //     if (href) {
        //         jessibuca.play(href);
        //         $player.style.display = 'none';
        //         $pause.style.display = 'inline-block';
        //         $destroy.style.display = 'inline-block';
        //     }
        // }, false)


        // $pause.addEventListener('click', function () {
        //     $player.style.display = 'inline-block';
        //     $pause.style.display = 'none';
        //     jessibuca.pause();
        // })

        // $destroy.addEventListener('click', function () {
        //     if (jessibuca) {
        //         jessibuca.destroy();
        //     }
        //     create();
        // })
    }
}